<template>
    <div class="personal">
        <div class="left">
            <div class="top">
                <div class="ava">
                    <AvatarView />
                </div>
                <div class="userName">{{ useSystemStore.userInfo.nickname }}</div>
                <div class="lastLoginTime">上次登录于 {{ useSystemStore.userInfo.login_at }}</div>
            </div>
            <div class="bottom">
                <el-form ref="formRef" :model="viewData.userInfo" :rules="rules" label-suffix=" :" label-position="top">
                    <el-form-item label="用户名" prop="username">
                        <el-input v-model="useSystemStore.userInfo.username" disabled />
                    </el-form-item>
                    <el-form-item label="用户昵称" prop="nickname">
                        <el-input v-model="viewData.userInfo.nickname" />
                    </el-form-item>
                    <el-form-item label="邮箱地址" prop="email">
                        <el-input v-model="viewData.userInfo.email" placeholder="请输入邮箱地址" />
                    </el-form-item>
                    <el-form-item label="手机号码" prop="mobile">
                        <el-input v-model="viewData.userInfo.mobile" placeholder="请输入手机号码" />
                    </el-form-item>
                    <el-form-item label="新密码" prop="new_password">
                        <el-input
                            type="password"
                            v-model="viewData.userInfo.new_password"
                            placeholder="不修改密码请留空"
                        />
                    </el-form-item>
                </el-form>
                <div class="footer">
                    <el-button v-loading="viewData.loading" type="primary" @click="submitForm">保存修改</el-button>
                    <el-button @click="handleFormReset">重置表单</el-button>
                </div>
            </div>
        </div>
        <div class="right">
            <el-tabs v-model="viewData.activeName" class="demo-tabs">
                <el-tab-pane name="first">
                    <template #label>
                        <span>登录日志</span>
                    </template>
                    <LoginView />
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script setup lang="ts">
import type { UploadProps } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { ref, reactive, onMounted } from 'vue'
import { useSystem } from '@/store'
import { system } from '@/api'
import { error } from '@/utils'
import { storeToRefs } from 'pinia'
import LoginView from '@/pages/system/logs/login.vue'
import AvatarView from './avatar.vue'

const useSystemStore = useSystem()
const { userInfo } = storeToRefs(useSystemStore)

interface IViewData {
    activeName: string
    userInfo: {
        avatar?: string
        lastTime?: string
        nickname?: string
        email?: string
        mobile?: string
        new_password?: string
    }
    loading: boolean
}
const viewData = reactive<IViewData>({
    activeName: 'first',
    userInfo: {
        avatar: '',
        lastTime: '',
        nickname: '',
        email: '',
        mobile: '',
        new_password: '',
    },
    loading: false,
})
const formRef = ref<FormInstance>()
const rules = reactive<FormRules>({
    nickname: [
        { required: true, message: '请输入昵称', trigger: 'blur' },
        { min: 1, max: 20, message: '昵称限制为20个字符以内', trigger: 'blur' },
    ],
    email: [{ type: 'email', trigger: 'blur', message: '请输入正确的邮箱格式' }],
    mobile: [{ pattern: /^1[3456789]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur' }],
    new_password: [{ min: 6, max: 20, message: '密码必须为6-20为的字符', trigger: 'blur' }],
})

const submitForm = async () => {
    if (!formRef.value) return
    try {
        await formRef.value.validate()
    } catch (e) {
        return
    }
    try {
        viewData.loading = true
        await system.myEditUserInfo(viewData.userInfo)
        useSystemStore.upUserInfo(viewData.userInfo)
    } catch (e) {}
    viewData.loading = false
}

const handleFormReset = () => {
    formRef.value?.resetFields()
    getUserInfo()
}

const handleAvatarSuccess: UploadProps['onSuccess'] = (response) => {
    viewData.userInfo.avatar = response.avatar
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.type !== 'image/jpeg') {
        error('头像必须为JPG格式')
        return false
    } else if (rawFile.size / 1024 / 1024 > 2) {
        error('头像大小不能超过2M')
        return false
    }
    return true
}

const getUserInfo = () => {
    viewData.userInfo.nickname = userInfo.value!.nickname
    viewData.userInfo.email = userInfo.value!.email
    viewData.userInfo.mobile = userInfo.value!.mobile
}

onMounted(() => {
    getUserInfo()
})
</script>

<style scoped lang="scss">
.personal {
    width: 100%;
    display: flex;
    justify-content: space-between;
    .left {
        width: 30%;
        border: 1px solid var(--border-color);
        border-radius: 5px;
        background-color: white;
        .top {
            padding-top: 1rem;
            .ava {
                text-align: center;
            }
            .userName {
                font-size: 1.5rem;
                text-align: center;
            }
            .lastLoginTime {
                font-size: 0.8rem;
                text-align: center;
                margin: 0.5rem 0 0 0;
            }
        }
        .bottom {
            padding: 1rem;
        }
        .footer {
            padding: 1rem;
            text-align: right;
        }
    }
    .right {
        width: 68%;
        border: 1px solid var(--border-color);
        border-radius: 5px;
        padding: 2rem;
        box-sizing: border-box;
        background-color: white;
    }
}
</style>
